<template>
	<view>
		<nav-bar title="商品列表"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module> 
		<view class="fixed_box">
			<!-- 商品排序 -->
			<view class="goods_sort_box">
				<view :class="{active:sortType == 3000}" @click="onSortType(3000)">智能排序</view>
				<view :class="{active:sortType == 3002}" @click="onSortType(3002)">好评优先</view>
				<view :class="{active:sortType == 3001}" @click="onSortType(3001)">低价优先</view>
				<view :class="{active:sortType == 3003}" @click="onSortType(3003)">销量优先</view>
			</view>
		</view> 
		<view class="interval"></view>
        <mescroll-body ref="mescrollRef" height="-98" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
        </mescroll-body>
	</view>
</template>

<script>
	import waterfallGoods from '@/components/module/waterfall_goods';
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			waterfallGoods
		},
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				goodsDataList: [],
				sortType:3000,
				typeId: ''
			};
		},
		//第一次加载
		onLoad(e) {
			if (e.typeId) {
				this.typeId = e.typeId;
			}
			if(e.sortType){
				this.sortType = e.sortType;
			}
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 排序选择
			onSortType(val){
				this.sortType = val;
				this.mescroll.triggerDownScroll();
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    sortType: this.sortType
                };
                if(this.typeId){
                	httpData.typeId = this.typeId;
                }
                this.$http
                	.post('api/mall/goods/v1/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.goodsDataList = res.data;
                		} else {
                			this.goodsDataList = this.goodsDataList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import "@/style/mixin.scss";
	.fixed_box {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.interval {
		height: 100rpx;
	}
	.goods_sort_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 28rpx;
		background-color: #FFF;
		>view {
			padding: 30rpx 40rpx;
			white-space: nowrap;
			color: #333333;
			opacity: 0.5;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				width: 2rpx;
				right: 0;
				height: 24rpx;
				transform: translateY(-50%);
				background: #cccccc;
			}
			&:last-child::before {
				content: inherit;
				width: 0;
			}
		}
		.active {
			opacity: 1;
		}
	}
</style>
